<template>
	<view class="savebottom">
		<view style="height: 140rpx;"></view>
		<view class="TabBar">
			<view class="tab" v-for="(item, index) in TabBarList" :key="index" @tap="navigatorTo(item.url)">
				<view :class="{ bd: item.bd }">
					<!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
					<image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon" mode="widthFix"></image>
					<!-- 设置一个状态值（type），判断加号是否展示 -->
					<image class="addimgsize" v-if="item.type == 1" src="../../static/images/tabBar/qd.png" mode="widthFix"></image>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import context from '../../main.js';
export default {
	props: {
		current: {
			type: Number,
			default: 0 //默认第一个页面tabbar激活
		}
	},
	data() {
		return {
			TabBarList: [
				{
					type: 0,
					icon: '../../static/images/tabBar/home.png',
					selectIcon: '../../static/images/tabBar/home_active.png',
					name: context.$t('tabBar.home'),
					url: '/pages/index/index'
				},
				{
					type: 0,
					icon: '../../static/images/tabBar/member.png',
					selectIcon: '../../static/images/tabBar/member_active.png',
					name: context.$t('tabBar.member'),
					url: '/pages/mymember/center'
				},
				{
					type: 1,
					bd: true,
					icon: '../../static/images/tabBar/qd.png',
					selectIcon: '../../static/images/tabBar/qd.png',
					url: '/pages/grab/index'
				},
				{
					type: 0,
					icon: '../../static/images/tabBar/financial.png',
					selectIcon: '../../static/images/tabBar/financial_active.png',
					name: context.$t('tabBar.financial'),
					url: '/pages/financial/index'
				},
				{
					type: 0,
					icon: '../../static/images/tabBar/my.png',
					selectIcon: '../../static/images/tabBar/my_active.png',
					name: context.$t('tabBar.my'),
					url: '/pages/personal/index'
				}
			]
		};
	},
	methods: {
		navigatorTo(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style scoped>
.TabBar {
	position: fixed;
	bottom: 0;
	height: 100rpx;
	background-color: #fff;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 1000;
	border-top: solid 1px whitesmoke;
}
.tab {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}
.imgsize {
	width: 27px;
	height: 27px;
}
.addimgsize {
	width: 90px;
	height: 150px;
	position: relative;
	display: inline-block;
	margin-top: 12px;
}
.text {
	font-size: 12px;
}
.bd {
	/* background-image: linear-gradient(0deg, #F53D46, #F53D46); */
	width: 62px;
	height: 70px;
	/* border-radius: 50%; */
	position: absolute;
	top: -20px;
	/* box-shadow: 0 0 5px #F53D46; */
	box-sizing: border-box;
	/* border: 1px solid #F53D46; */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	display: flex;
}

.savebottom {
	bottom: constant(safe-area-inset-bottom);
	bottom: env(safe-area-inset-bottom);
}
</style>
